<template>
  <div class="app">
    <div class="card">222</div>
    <div data-aos="fade-up" class="text-2xl">AOS Animations in Nuxt</div>

    <div ref="section" data-aos="fade-up" class="section">4</div>
    <div ref="section" data-aos="fade-up" class="section1">5</div>
    <div ref="section" data-aos="fade-up" class="section2">6</div>
    <div ref="section" data-aos="fade-up" class="section3">7</div>
    <div ref="section" data-aos="fade-up" class="section4">8</div>
    <div ref="section" data-aos="fade-down" class="section5">9</div>
  </div>
</template>

<script>
export default {
  name: 'Search',

  data() {
    return {}
  },

  head: {
    title: '搜索',
  },

  mounted() {},

  methods: {},
}
</script>

<style lang="scss" scoped>
.section {
  height: 300px;
  background-color: lightblue;
  margin: 20px 0;
  font-size: 2rem;
}
.section1 {
  height: 300px;
  background-color: rgb(41, 186, 234);
  margin: 20px 0;
  font-size: 2rem;
}
.section2 {
  height: 300px;
  background-color: rgb(57, 179, 23);
  margin: 20px 0;
  font-size: 2rem;
}
.section3 {
  height: 300px;
  background-color: rgb(230, 121, 39);
  margin: 20px 0;
  font-size: 2rem;
}
.section4 {
  height: 300px;
  background-color: rgb(193, 32, 32);
  margin: 20px 0;
  font-size: 2rem;
}
.section5 {
  height: 300px;
  background-color: rgb(160, 162, 255);
  margin: 20px 0;
  font-size: 2rem;
}
</style>
